<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <h:head>
        <style type="text/css">
            .col1 { vertical-align:top;	}
            .col2 {	vertical-align:top;	width:450px; }
            .wizard { width:800px; }
            .wform td {	vertical-align:top;	}
            .wfcol1 { text-align: right; white-space:nowrap;font-weight: bold}
            .wfcol2 { margin-right:10px;
                      padding-right: 10px}
            .wfcol3 { margin-right:10px;
                      padding-right: 10px}
            .s1row td { height:30px; }
            .rich-message { color:red;	}

            .navPanel {
                position:absolute;
                bottom:0;
                height:23px;
                margin:0;
                padding:2px;
            }
            /*margin and padding on body element
              can introduce errors in determining
              element position and are not recommended;
              we turn them off as a foundation for YUI
              CSS treatments. */
            body {
                margin:0;
                padding:0;
            }
            #toggle {
                text-align: center;
                padding: 1em;
            }
            #toggle a {
                padding: 0 5px;
                border-left: 1px solid black;
            }
            #tRight {
                border-left: none !important;
            }
            .right{
                vertical-align: top;
            }
            input[type='submit']{
                margin:3px 5px 3px 5px;
                padding:2px 5px 2px 5px;
            }
            .active-row {
                background-color: #FFEBDA !important;
                cursor: pointer;
            }
            .top{
                vertical-align: top;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css" />
        <link rel="stylesheet" type="text/css" href="css/resize.css" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" />
        <script type="text/javascript" src="js/yahoo-min.js"></script>
        <script type="text/javascript" src="js/event-min.js"></script>
        <script type="text/javascript" src="js/dom-min.js"></script>
        <script type="text/javascript" src="js/element-min.js"></script>
        <script type="text/javascript" src="js/dragdrop-min.js"></script>
        <script type="text/javascript" src="js/resize-min.js"></script>
        <script type="text/javascript" src="js/animation-min.js"></script>
        <script type="text/javascript" src="js/layout-min.js"></script>

        <script language="JavaScript" type="text/javascript">
            function hide() {
                return false;
            }
        </script>
        <script type="text/javascript">
            (function() {
                var Dom = YAHOO.util.Dom,
                        Event = YAHOO.util.Event;

                Event.onDOMReady(function() {
                    var layout = new YAHOO.widget.Layout({
                        minWidth: 1000,
                        minHeight: 500,
                        units: [
                            {position: 'top', height: 80, resize: false, body: 'top1', gutter: '2px', collapse: true, resize: true, maxHeight: 100},
                            {position: 'left', width: 200, resize: true, body: 'left1', gutter: '2px 2px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 300},
                            {position: 'center', minWidth: 400, minHeight: 200}
                        ]
                    });
                    layout.on('render', function() {
                        var el = layout.getUnitByPosition('center').get('wrap');
                        var layout2 = new YAHOO.widget.Layout(el, {
                            parent: layout,
                            minWidth: 400,
                            minHeight: 200,
                            units: [
                                {position: 'top', body: 'top2', height: 300, gutter: '2px', collapse: true, resize: true, maxHeight: 620},
                                {position: 'center', body: 'center2', gutter: '2px', scroll: true}
                            ]
                        });
                        layout2.render();
                    });
                    layout.render();
                });
            })();
        </script>
    </h:head>
    <h:form>
        <rich:panel header="审批流程" styleClass="content-hight">
            <rich:toolbar>
                <rich:toolbarGroup>
                    <a4j:commandButton value="新建模型向导" id="link" render="panelForm"
                                       onclick="#{rich:component('personPanel')}.show();"
                                       action="#{checkFlowBean.newFlowModel}"/> 
                    <a4j:commandButton  action="#{checkFlowBean.resultModel}"  value="终止选中项"
                                        render="tableGroup,treemodel"  />
                    <a4j:commandButton  action="#{checkFlowBean.rebackModel}"  value="恢复选中项"
                                        render="tableGroup,treemodel"/>
                </rich:toolbarGroup>
            </rich:toolbar>
            <h:outputLabel value="警告：" />
            <rich:message/>
            <h:outputLabel id="err2" value="#{queryBean.err.errtip}" style="color:red" />

            <h:panelGrid columns="1" columnClasses="top,top">
                <h:panelGroup>
                    <div style="max-height: 200px;overflow: auto;">
                        <rich:tree id="treemodel1" style="width:300px;" value="#{checkFlowBean.allNode}"  var="item" >
                            <rich:treeNode >
                                <a4j:commandLink action="#{checkFlowBean.finish}" render="tableGroup">
                                    <f:param name="modelname" value="#{item.data.fname}:#{item.data.treetype}:#{item.data.type}:#{item.data.year}"/>
                                    <h:outputText value="#{item.data.fname}"/>
                                </a4j:commandLink>
                            </rich:treeNode>
                        </rich:tree>
                    </div>
                </h:panelGroup>
                <h:panelGroup id="tableGroup">
                    <rich:extendedDataTable rowKeyVar="rkv"
                                            rowClasses="list-row-odd,list-row-even"
                                            sortMode="single"
                                            headerClass="table-header"
                                            selection="#{checkFlowBean.selection}"
                                            selectionMode="single"
                                            style="max-height:190px;"                                            
                                            id="incontractTable"
                                            value="#{checkFlowBean.alllist}" var="order"
                                            noDataLabel="无数据!">
                        <a4j:ajax render="selectid,err2,liu,fabuOrNotFabu,showFlow"
                                  listener="#{checkFlowBean.takeSelection}"
                                  event="selectionchange" />
                        <rich:column width="150px;">
                            <f:facet name="header">模型名称</f:facet>
                            <h:outputText value="#{order.fname}"/>
                        </rich:column>
                        <rich:column >
                            <f:facet name="header">创建时间</f:facet>
                            <h:outputText value="#{order.createtime}" >
                                <f:convertDateTime timeZone="GMT+8" dateStyle="medium"/>
                            </h:outputText>
                        </rich:column>
                        <rich:column width="120px;" style="text-align: center;">
                            <f:facet name="header">
                                <h:panelGroup id="fabuOrNotFabu" style="white-space: nowrap">
                                    状态
                                    <a4j:commandLink action="#{checkFlowBean.publishModel}"
                                                     render="tableGroup,treemodel"
                                                     style="text-decoration: none;">
                                        <h:outputText value="(发布)" rendered="${fn:startsWith(checkFlowBean.flowmodel.isPub,'0')}"/>
                                        <h:outputText value="(取消发布)" rendered="${fn:startsWith(checkFlowBean.flowmodel.isPub,'1')}"/>
                                    </a4j:commandLink>
                                </h:panelGroup>
                            </f:facet>
                            <h:outputText value="发布" rendered="${fn:startsWith(order.isPub,'1')}" />
                            <h:outputText value="未发布" rendered="${fn:startsWith(order.isPub,'0')}" />
                            <h:outputText value="已终止" rendered="${fn:startsWith(order.isPub,'2')}" />
                        </rich:column>
                        <rich:column style="text-align:center;">
                            <f:facet name="header">归属年份</f:facet>
                            <h:outputText value="#{order.createtime}">
                                <f:convertDateTime pattern="yyyy" timeZone="GMT+8"/>
                            </h:outputText>
                        </rich:column>
                        <rich:column width="150px;">
                            <f:facet name="header">审批单据</f:facet>
                            <h:outputText value="#{order.node.name}" />
                        </rich:column>
                        <rich:column style="text-align: center;">
                            <f:facet name="header">操作</f:facet>
                            <a4j:commandLink value="删除"
                                             onclick="return confirm('确定删除');"
                                             action="#{checkFlowBean.delete}"
                                             render="tableGroup,treemodel"/>
                        </rich:column>
                    </rich:extendedDataTable>
                    <rich:contextMenu target="incontractTable" mode="ajax">
                        <rich:menuItem label="终止选中项" mode="ajax"
                                       action="#{checkFlowBean.resultModel}"
                                       render="tableGroup,treemodel"  />
                        <rich:menuItem label="恢复选中项" mode="ajax"
                                       action="#{checkFlowBean.rebackModel}"
                                       render="tableGroup,treemodel"  />
                    </rich:contextMenu>
                </h:panelGroup>
            </h:panelGrid>
            <hr/>
            <center>
                <h:panelGrid id="showFlow" columns="1">
                    <c:if test="true">
                        <h:outputText value="开始节点" style="background:url(resource/images/BlueExplorer.jpg);" >
                        </h:outputText>
                        <h:graphicImage value="resource/images/dot2.gif" styleClass="pic" />
                    </c:if>
                    <c:forEach id="shenpi" var="it" items="#{checkFlowBean.checknodes}">
                        <a4j:commandLink  value="#{it.level}  级审批"
                                          style="background:url(resource/images/BlueExplorer.jpg);"
                                          oncomplete="#{rich:component('detail')}.show()"
                                          render="detailpanel,tableGroup,detail"
                                          action="#{checkFlowBean.forCheck}">
                            <f:setPropertyActionListener value="#{it.nodes}"
                                                         target="#{checkFlowBean.currennodes}"/>
                        </a4j:commandLink>
                        <h:graphicImage value="resource/images/dot2.gif" styleClass="pic" />
                    </c:forEach>
                    <c:if test="true">
                        <h:outputText value="结束节点" style="background:url(resource/images/BlueExplorer.jpg);"/>
                    </c:if>
                </h:panelGrid>
            </center>
        </rich:panel>
    </h:form>

    <rich:popupPanel id="detail" autosized="true">
        <f:facet name="header">本节点审批人</f:facet>
        <f:facet name="controls">
            <h:outputLink onclick="#{rich:component('detail')}.hide();
                return false;">关闭</h:outputLink>
        </f:facet>
        <rich:panel style="width:100%;height:100%;">
            <rich:dataTable value="#{checkFlowBean.currennodes}" var="it">
                <h:column>
                    #{it.name}(#{it.id})
                </h:column>
            </rich:dataTable>
        </rich:panel>
    </rich:popupPanel>
    <rich:popupPanel id="personPanel" autosized="true" width="600">
        <f:facet name="header">审批流设置向导</f:facet>
        <f:facet name="controls">
            <h:outputLink value="#" onclick="#{rich:component('personPanel')}.hide();
                return false;">关闭</h:outputLink>
        </f:facet>
        <rich:panel>
            <h:form>
                <h:panelGroup id="panelForm">
                    <h:panelGroup rendered="#{checkFlowBean.testurl eq  '/page/checkflow/wstep1.xhtml'}">
                        <ui:include id="includeId" src="/page/checkflow/wstep1.xhtml"/>
                        <a4j:commandButton value="继续" action="#{checkFlowBean.goWstep2}" render="panelForm"/>
                    </h:panelGroup>
                    <h:panelGroup rendered="#{checkFlowBean.testurl eq  '/page/checkflow/wstep2.xhtml'}">
                        <ui:include id="includeId" src="/page/checkflow/wstep2.xhtml"/>
                        <a4j:commandButton value="返回" action="#{checkFlowBean.newFlowModel}" render="panelForm"/>
                    </h:panelGroup>
                </h:panelGroup>
            </h:form>
        </rich:panel>
    </rich:popupPanel>

    <rich:popupPanel id="personliPanel" autosized="true" width="600">
        <f:facet name="header">人员列表</f:facet>
        <f:facet name="controls">
            <h:outputLink value="#" onclick="#{rich:component('personliPanel')}.hide();
                return false;">关闭</h:outputLink>
        </f:facet>
        <h:form>
            <rich:panel id="personPopupPanel">
                <h:panelGrid columns="2">
                    <h:panelGroup>
                        <div style="height:300px;overflow:auto;">
                            <rich:dataTable id="roleTable"
                                            value="#{checkFlowBean.roleList}"
                                            var="per"
                                            style="width:200px"
                                            styleClass="tableStyle"
                                            noDataLabel="无数据!">
                                <h:column>
                                    <f:facet name="header">编码</f:facet>
                                    <h:outputText value="#{per.code}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">名称</f:facet>
                                    <h:outputText value="#{per.name}"/>
                                </h:column>
                                <a4j:ajax event="rowclick"
                                          execute="@this" render="personTable"
                                          listener="#{checkFlowBean.roleSelected(per.code,per.name)}"/>
                            </rich:dataTable>
                        </div>
                        <rich:jQuery selector=".tableStyle tr" event="click"
                                     query="jQuery(this).addClass('click-row');
                                     jQuery('.tableStyle tr').not(this).removeClass('click-row');"/>
                    </h:panelGroup>
                    <h:panelGroup>
                        <div style="height:300px;width:320px;overflow:auto;">
                            <rich:dataTable id="personTable" value="#{checkFlowBean.personli}"
                                            var="per" style="width:300px"
                                            noDataLabel="无数据!">
                                <h:column>
                                    <f:facet name="header">选择</f:facet>
                                    <h:selectBooleanCheckbox value="#{per.selected}">
                                        <a4j:ajax event="click" render="@this"/>
                                    </h:selectBooleanCheckbox>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">代码</f:facet>
                                    <h:outputText value="#{per.cpsn_number}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">名称</f:facet>
                                    <h:outputText value="#{per.cpsn_name}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">职务</f:facet>
                                    <h:outputText value="#{per.duty}"/>
                                </h:column>
                            </rich:dataTable>
                        </div>
                    </h:panelGroup>
                </h:panelGrid>
                <a4j:commandButton value="确定" action="#{checkFlowBean.personSelected}"
                                   onclick="#{rich:component('personliPanel')}.hide();"
                                   render="selectiontable"/>
                <a4j:commandButton value="取消" onclick="#{rich:component('personliPanel')}.hide();"/>
            </rich:panel>
        </h:form>
    </rich:popupPanel>
</ui:composition>